<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .error{
            color:red
        }
        .success{
            color:green;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            用户名 <input type="text" v-model="username"/>
            <span :class="usernameclass">{{usernametip}}</span>
        </div>
        <div>
            密码 <input type="text" v-model="userpwd"/>
            <span :class="userpwdclass">{{userpwdtip}}</span>
        </div>
        <div>
            手机号 <input type="text" v-model="usertel"/>
            <span :class="usertelclass">{{userteltip}}</span>
        </div>
        <button @click="submit">验证</button>
    </div>
    
</body>
<script>
    new  Vue({
        el:"#app",
        data:{
            username:"",
            usernameclass:"error",
            usernametip:"请输入数字字母_$组成长度6到10位不能以数字开头",
            usernamereg:/^[a-z_$][a-z0-9_$]{5,9}$/i,

            userpwd:"",
            userpwdclass:"error",
            userpwdtip:"请输入数字字母组成长度6到12位",
            userpwdreg:/^[a-z0-9]{6,12}$/i,

            usertel:"",
            usertelclass:"error",
            userteltip:"请输入常用的11位手机号",
            usertelreg:/^1[3-9][0-9]{9}$/


        },
        methods:{
            submit(){
                if(this.usernamereg.test(this.username)){//用正则表达式去验证字符
                    this.usernametip = "√";
                    this.usernameclass = "success";
                }else{
                    this.usernametip = "请输入数字字母_$组成长度6到10位不能以数字开头";
                    this.usernameclass = "error";
                }

                if(this.userpwdreg.test(this.userpwd)){//表示正确
                    this.userpwdtip = "√";
                    this.userpwdclass= "success";
                }else{
                    this.userpwdtip = "请输入数字字母组成长度6到12位",
                    this.userpwdclass="error";
                }

                if(this.usertelreg.test(this.usertel)){
                    this.userteltip = "√";
                    this.usertelclass= "success";
                }else{
                    this.userteltip = "请输入常用的11位手机号";
                    this.usertelclass = "error";
                }


            }
        }
    })

</script>
</html>